<template>
    <!-- 搜索 -->
    <view class="inp" @click="$onTo(`/pagesClass-rich/search-rich/search-rich?swiperData=${swiperData}`)">
        <input type="text" placeholder="请输入关键字搜索" class="search" disabled :style="{ width: width }" />
        <image src="../../static/RICHhome/RICHsearch-2.png" mode="scaleToFill" class="icon"></image>
        <swiper class="swiper_zi" vertical="true" autoplay="true" circular="true" interval="3000" @change="getItem">
            <swiper-item v-for="(item, index) in hotList" :key="index" :item-id="item">
                <view class="zimubox">
                    <view class="swiper_item">{{ item }}</view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
// 这个路由拦截库和小程序搭配有问题，在还没有登录时，还没有触发页面的onLoad，就已经触发了子组件的created了
export default {
    name: 'swiperSearch',
    props: {
        width: {
            type: String,
            default: '700rpx'
        }
    },

    data() {
        return {
            hotList: [],
            swiperData: ''
        };
    },

    created() {
        // 搜索页面数据获取
        this.fetchHistorySearch().catch((err) => {
            if (err === 'no uid') {
                this.eventId = this.$eventEmitter.subscribe('successLoginThenReFetch', this.fetchHistorySearch); // 登录成功时重新加载一下历史搜索数据
            }
        });
    },

    destroyed() {
        this.eventId && this.$eventEmitter.removeHandler('successLoginThenReFetch', this.eventId);
    },

    methods: {
        /**
         * 请求历史搜索
         */
        fetchHistorySearch() {
            if (this.$getUid()) {
                return this.$request('member/mall/userWordHistory/searchPage', {}, 'get', true).then((res) => {
                    this.hotList = res.data?.hotSearchList || [];
                    this.swiperData = res.data?.hotSearchList[0] || '';
                });
            } else {
                return Promise.reject('未登录');
            }
        },

        getItem(vla, it) {
            this.swiperData = this.hotList[vla.detail.current];
        }
    }
};
</script>

<style lang="scss" scoped>
.inp {
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    position: relative;

    .search {
        width: 700rpx;
        height: 70rpx;
        background: #f9f9f9;
        border-radius: 35rpx;
        margin: 20rpx 0;
        padding: 0 50rpx 0 100rpx;
        font-size: 28rpx;
    }

    .icon {
        width: 29rpx;
        height: 29rpx;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
		/*  #ifdef  MP  */
		 left: 70rpx;
		/*  #endif  */
		/*  #ifndef  MP  */
		 left: 90rpx;
		/*  #endif  */
       
    }
}

.swiper_zi {
    position: absolute;
    width: 50%;
    height: 34rpx;
    top: 40rpx;
    left: 80rpx;

    .zimubox {
        height: 34rpx;

        .swiper_item {
            font-size: 28rpx;
            font-weight: 500;
            color: #ababba;
        }
    }
}
</style>
